import PageWrap from '@/components/PageWrap';
import type { ProFieldFCMode } from '@ant-design/pro-components';
import { ProField } from '@ant-design/pro-components';
import { Descriptions, Radio, Space, Switch } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import React from 'react';

const Atom = () => {
    const [state, setState] = useState<ProFieldFCMode>('read');
    const [plain, setPlain] = useState<boolean>(false);
    return (
        <PageWrap>
            <Space>
                <Radio.Group onChange={(e) => setState(e.target.value as ProFieldFCMode)} value={state}>
                    <Radio value="read">只读</Radio>
                    <Radio value="edit">编辑</Radio>
                </Radio.Group>
                简约模式
                <Switch checked={plain} onChange={(checked) => setPlain(checked)} />
            </Space>
            <br />
            <br />
            <Descriptions column={2}>
                <Descriptions.Item label="空字符串">
                    <ProField text="" mode="read" />
                </Descriptions.Item>
                <Descriptions.Item label="头像">
                    <ProField
                        text="https://avatars2.githubusercontent.com/u/8186664?s=60&v=4"
                        mode="read"
                        valueType="avatar"
                    />
                </Descriptions.Item>
                <Descriptions.Item label="文本">
                    <ProField text="这是一段文本" valueType="text" mode={state} plain={plain} />
                </Descriptions.Item>
                <Descriptions.Item label="图片">
                    <ProField
                        text="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                        valueType="image"
                        mode={state}
                        plain={plain}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="金额">
                    <ProField text="100" valueType="money" mode={state} plain={plain} />
                </Descriptions.Item>
                <Descriptions.Item label="颜色">
                    <ProField text="blue" valueType="color" mode={state} plain={plain} />
                </Descriptions.Item>
                <Descriptions.Item label="数字">
                    <ProField text="19897979797979" valueType="digit" mode={state} plain={plain} />
                </Descriptions.Item>
                <Descriptions.Item label="数字范围">
                    <ProField text={[123, 456]} valueType="digitRange" mode={state} plain={plain} />
                </Descriptions.Item>
                <Descriptions.Item label="秒格式化">
                    <ProField text={2000000} valueType="second" mode={state} plain={plain} />
                </Descriptions.Item>
                <Descriptions.Item label="百分比">
                    <ProField text="100" valueType="percent" mode={state} plain={plain} />
                </Descriptions.Item>
                <Descriptions.Item label="评分">
                    <ProField text={3.5} valueType="rate" mode={state} plain={plain} />
                </Descriptions.Item>
                <Descriptions.Item label="选择框">
                    <ProField
                        text="open"
                        mode={state}
                        valueEnum={{
                            all: { text: '全部', disabled: true, status: 'Default' },
                            open: {
                                text: '未解决',
                                status: 'Error',
                            },
                            closed: {
                                text: '已解决',
                                status: 'Success',
                            },
                            processing: {
                                text: '解决中',
                                status: 'Processing',
                            },
                        }}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="多选">
                    <ProField
                        text={['open', 'closed']}
                        mode={state}
                        valueType="checkbox"
                        valueEnum={{
                            all: { text: '全部', disabled: true, status: 'Default' },
                            open: {
                                text: '未解决',
                                status: 'Error',
                            },
                            closed: {
                                text: '已解决',
                                status: 'Success',
                            },
                            processing: {
                                text: '解决中',
                                status: 'Processing',
                            },
                        }}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="多选 labelInValue">
                    <ProField
                        text={[
                            {
                                value: 'open1',
                                label: '打开',
                            },
                            {
                                value: 'closed2',
                                label: '关闭',
                            },
                        ]}
                        mode={state}
                        valueType="checkbox"
                        valueEnum={{
                            all: { text: '全部', disabled: true, status: 'Default' },
                            open: {
                                text: '未解决',
                                status: 'Error',
                            },
                            closed: {
                                text: '已解决',
                                status: 'Success',
                            },
                            processing: {
                                text: '解决中',
                                status: 'Processing',
                            },
                        }}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="单选">
                    <ProField
                        text="open"
                        mode={state}
                        valueType="radio"
                        valueEnum={{
                            all: { text: '全部', disabled: true, status: 'Default' },
                            open: {
                                text: '未解决',
                                status: 'Error',
                            },
                            closed: {
                                text: '已解决',
                                status: 'Success',
                            },
                            processing: {
                                text: '解决中',
                                status: 'Processing',
                            },
                        }}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="单选按钮">
                    <ProField
                        text="open"
                        mode={state}
                        valueType="radioButton"
                        valueEnum={{
                            all: { text: '全部', disabled: true, status: 'Default' },
                            open: {
                                text: '未解决',
                                status: 'Error',
                            },
                            closed: {
                                text: '已解决',
                                status: 'Success',
                            },
                            processing: {
                                text: '解决中',
                                status: 'Processing',
                            },
                        }}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="远程选择框">
                    <ProField
                        text="open"
                        mode={state}
                        valueType="select"
                        request={async () => [
                            { label: '全部', value: 'all' },
                            { label: '未解决', value: 'open' },
                            { label: '已解决', value: 'closed' },
                            { label: '解决中', value: 'processing' },
                            {
                                label: '特殊选项',
                                value: 'optGroup',
                                optionType: 'optGroup',
                                options: [
                                    { label: '不解决', value: 'no' },
                                    { label: '已废弃', value: 'clear' },
                                ],
                            },
                        ]}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="级联选择框">
                    <ProField
                        text={['zhejiang', 'hangzhou', 'xihu']}
                        mode={state}
                        valueType="cascader"
                        fieldProps={{
                            fieldNames: {
                                label: 'name',
                            },
                        }}
                        request={async () => [
                            {
                                value: 'zhejiang',
                                name: 'Zhejiang',
                                children: [
                                    {
                                        value: 'hangzhou',
                                        name: 'Hangzhou',
                                        children: [
                                            {
                                                value: 'xihu',
                                                name: 'West Lake',
                                            },
                                        ],
                                    },
                                ],
                            },
                            {
                                value: 'jiangsu',
                                name: 'Jiangsu',
                                children: [
                                    {
                                        value: 'nanjing',
                                        name: 'Nanjing',
                                        children: [
                                            {
                                                value: 'zhonghuamen',
                                                name: 'Zhong Hua Men',
                                            },
                                        ],
                                    },
                                ],
                            },
                        ]}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="进度条">
                    <ProField text="40" valueType="progress" mode={state} plain={plain} />
                </Descriptions.Item>
                <Descriptions.Item label="slider">
                    <ProField text="40" valueType="slider" mode={state} plain={plain} />
                </Descriptions.Item>
                <Descriptions.Item label="百分比">
                    <Space>
                        <ProField
                            text={10}
                            valueType={{
                                type: 'percent',
                                showSymbol: true,
                                showColor: true,
                            }}
                            mode="read"
                        />
                        <ProField
                            text={0}
                            valueType={{
                                type: 'percent',
                                showSymbol: true,
                                showColor: true,
                            }}
                            mode="read"
                        />
                        <ProField
                            text={-10}
                            valueType={{
                                type: 'percent',
                                showSymbol: true,
                                showColor: true,
                            }}
                            mode="read"
                        />
                    </Space>
                </Descriptions.Item>
                <Descriptions.Item label="日期时间">
                    <ProField
                        text={dayjs('2019-11-16 12:50:26').valueOf()}
                        valueType="dateTime"
                        mode={state}
                        plain={plain}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="相对于当前时间">
                    <Space>
                        <ProField
                            text={dayjs('2019-11-16 12:50:26').valueOf()}
                            valueType="fromNow"
                            mode={state}
                            plain={plain}
                        />
                        <ProField
                            text={dayjs('2020-11-16 12:50:26').valueOf()}
                            valueType="fromNow"
                            mode={state}
                            plain={plain}
                        />
                    </Space>
                </Descriptions.Item>
                <Descriptions.Item label="日期">
                    <ProField
                        text={dayjs('2019-11-16 12:50:26').valueOf()}
                        valueType="date"
                        mode={state}
                        plain={plain}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="日期区间">
                    <ProField
                        text={[
                            dayjs('2019-11-16 12:50:26').add(-1, 'd').valueOf(),
                            dayjs('2019-11-16 12:50:26').valueOf(),
                        ]}
                        plain={plain}
                        valueType="dateRange"
                        mode={state}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="日期时间区间">
                    <ProField
                        text={[
                            dayjs('2019-11-16 12:50:26').add(-1, 'd').valueOf(),
                            dayjs('2019-11-16 12:50:26').valueOf(),
                        ]}
                        plain={plain}
                        valueType="dateTimeRange"
                        mode={state}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="时间">
                    <ProField
                        text={dayjs('2019-11-16 12:50:26').valueOf()}
                        plain={plain}
                        valueType="time"
                        mode={state}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="时间区间">
                    <ProField
                        text={[
                            dayjs('2019-11-16 12:50:26').add(-1, 'd').valueOf(),
                            dayjs('2019-11-16 12:50:26').valueOf(),
                        ]}
                        plain={plain}
                        valueType="timeRange"
                        mode={state}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="密码">
                    <ProField text="password" plain={plain} valueType="password" mode={state} />
                </Descriptions.Item>
                <Descriptions.Item label="代码块">
                    <ProField
                        text={`
yarn run v1.22.0            
$ eslint --format=pretty ./packages
Done in 9.70s.
          `}
                        valueType="code"
                        mode={state}
                        plain={plain}
                    />
                </Descriptions.Item>
                <Descriptions.Item label="JSON 代码块">
                    <ProField
                        text={`{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "declaration": true,
    "skipLibCheck": true
  },
  "include": ["**/src", "**/docs", "scripts", "**/demo", ".eslintrc.js"]
}
`}
                        valueType="jsonCode"
                        mode={state}
                        plain={plain}
                    />
                </Descriptions.Item>
            </Descriptions>
        </PageWrap>
    );
};

export default Atom;
